<template>
	<view>
		<cu-custom class="text-Black" bgColor="bg-red" :isBack="true">		<block slot="backText"></block>
			<block slot="content">套餐专区</block>
		</cu-custom>
		<view class="cu-bar bg-white search">
			
			<view class="search-form text-center align-center">
				<text class="cuIcon-search lg text-gray"></text>
				<input type="text" placeholder="请输入搜索的套餐名称" confirm-type="search"  @blur="focus=false" :focus="focus" bindinput="searchIcon"
				 v-model="keyword" @confirm="goSearch(keyword)"></input>
			</view>
		</view>
		<view class="white-box">
			<view class="top-box">
				<!-- <scroll-view scroll-x class="bg-white nav text-center">
					<view class="cu-item my-cu-item" v-for="(item,index) in cate" :key="index" :class="index==TabCur?'cur text-'+theme:'text-black'"
					 @tap="tabSelect" :data-id="index">
						<view class="">{{item.title}}</view>
					</view>
				</scroll-view> -->
			</view>
			
			<view class="list-box">
				<block v-for="(value,index) in list" :key="index">
					<view  class="goods-item" @tap="goGoodsDetail(value.id)">
						<view class="goods-thumb">
							<image class="thumb" mode="aspectFill" :src="value.picture"></image>
							<text class="sold-out" v-if="value.stock <= 0">售罄</text>
						</view>
						<view class="goods_info">
							
							<view class="title-line">
								
								<text class="title" >{{value.name}}</text>
							</view>
							
							<view class="price-action">
								<view class="price-side">
									<view class="price-line">
										<text class="price">￥{{value.price}}</text>
										<text class="market-price">￥{{value.original_price}}</text>
									</view>
									
								</view>
								<view class="action">去购买</view>
							</view>
						</view>
					</view>
				</block>
			</view>
			<view class="cu-load margin-center" :class="loading?'loading':'over'"></view>
		</view>
	</view>
</template>

<script>
	import CountDown from '@/components/default/CountDown.vue'
	export default {
		components: {
			CountDown,
		},
		data() {
			return {
				cate_id: 0,
				list: [],
				page: 1,
				focus: false,
				hasMore: true,
				loading: false,
				theme: this.$config.THEME(),
				cate:[],
				type: 1,
				TabCur:0,
				keyword:'',
			};
		},
		onLoad(options) {
			// this.getCategory()
			if (options.cate_id) this.cate_id = options.cate_id
			console.log(this.cate_id)
			// this.getList();
		},
		onShow() {
			this.page = 1
			this.list = []
			this.hasMore = true
			this.loading = false
			this.getList();
		},
		methods: {
			getCategory() {
				this.$http
					.get('product_cate_index', {
						type: this.type
					})
					.then((response) => {
						console.log(response.data.data)
						this.cate = response.data.data
						if(this.cate[0]){
							this.cate_id = this.cate[0].id
						}
						this.getList();
						uni.hideLoading()
						uni.stopPullDownRefresh()
					})
					.catch((response) => {
						console.log(response)
					})
			},
			goSearch(keyword) {
				this.keyword = keyword
				this.list = []
				this.hasMore = true
				this.loading = false
				this.page = 1
				this.getList()
			},
			goGoodsDetail(id) {
				uni.navigateTo({
					url: "/pages/shop/pass_list?id=" + id
				})
			},
			getList() {
				if (this.hasMore && !this.loading) {
					this.loading = true
					let param = {
						page: this.page,
						keyword: this.keyword
					}
					if (this.cate_id) param.cate_id = this.cate_id
					console.log(param)
					this.$http
						.get('product_taocan', param)
						.then((response) => {
							let list = this.list
							
							if (response.data.data.length > 0) {
								if (list.length > 0)
									list = list.concat(response.data.data)
								else list = response.data.data
								this.list = list
							} else {
								this.hasMore = false
							}
							this.page += 1
							this.loading = false
							uni.stopPullDownRefresh()
						})
						.catch((response) => {
							console.log(response)
							uni.stopPullDownRefresh()
						})
				}
			},
		},
		onPullDownRefresh() {
			this.hasMore = true
			this.loading = false
			this.page = 1
			this.list = []
			this.getList()
		},
		onReachBottom() {
			this.getList()
		},
	}
</script>

<style>
	page{
		background-color: #FFFFFF;
	}
	.white-box{
		padding: 0 20rpx;
	}
	.white-box .top-box{
		margin-top: 20rpx;
		display: flex;
		align-items: center;
	}
	.top-box image{
		width: 50rpx;
		height: 50rpx;
		flex-shrink: 0;
	}
	.top-box text{
		height: 60rpx;
		line-height: 60rpx;
		margin-left: 5rpx;
		padding-left: 15rpx;
		border-left: 4rpx solid #FFE869;
		font-size: 24rpx;
		font-weight: bold;
		color: #3A3A3A;
	}
</style>

<style>
	.list-box {
	}
	.list-box .goods-item{
		margin: 20rpx 0;
		display: flex;
		justify-content: space-between;
		align-items: center;
	}
	.goods-item .goods-thumb{
		width: 200rpx;
		height: 200rpx;
		flex-shrink: 0;
		margin-right: 20rpx;
		position: relative;
	}
	.goods-thumb .thumb{
		width: 100%;
		height: 100%;
		border: 1rpx solid #DDDDDD;
		border-radius: 6rpx;
	}
	.goods-thumb .factory{
		position: absolute;
		top: 6rpx;
		left: 0;
		background-color: #FF0000;
		color: #ffffff;
		font-size: 24rpx;
		width: 120rpx;
		text-align: center;
		height: 30rpx;
		line-height: 30rpx;
		border-top-right-radius: 15rpx;
		border-bottom-right-radius: 15rpx;
	}
	.goods-thumb .sold-out{
		width: 100rpx;
		height: 100rpx;
		text-align: center;
		line-height: 100rpx;
		border-radius: 50%;
		background-color: rgba(0,0,0,0.5);
		color: #ffffff;
		font-size: 32rpx;
		position: absolute;
		top: 50rpx;
		left: 50rpx;
	}
	
	.goods-item .goods_info{
		flex: 1;
		height: 200rpx;
		display: flex;
		flex-direction: column;
		justify-content: space-between;
	}
	.goods_info .title-line{
		margin-top: 20rpx;
		display: flex;
		align-items: center;
	}
	.title-line .attr{
		flex-shrink: 0;
		padding: 4rpx 20rpx;
		border-radius: 20rpx;
		background-color: #FFEE8B;
		color: #333333;
		font-size: 20rpx;
	}
	.title-line .title{
		margin-left: 4rpx;
		font-size: 28rpx;
		color: #000000;
		font-weight: bold;
		height: 40rpx;
		overflow: hidden;
	}
	.goods_info .price-action{
		display: flex;
		justify-content: space-between;
		align-items: center;
	}
	.price-action .price-side{
		
	}
	.price-side .price-line .price{
		font-size: 30rpx;
		color: #F32F2F;
		font-weight: bold;
		margin-right: 30rpx;
	}
	.price-side .price-line .market-price{
		font-size: 24rpx;
		color: #B1B1B1;
		text-decoration: line-through;
	}
	.price-side .award{
		margin-top: 10rpx;
		padding: 4rpx 0;
		/* width: 160rpx; */
		text-align: center;
		border-radius: 4rpx;
		font-size: 20rpx;
		color: #FFFFFF;
		background-color: #FC2B5D;
	}
	.price-action .action{
		width: 110rpx;
		height: 40rpx;
		border: 2rpx solid #F32F2F;
		border-radius: 20rpx;
		text-align: center;
		line-height: 36rpx;
		font-size: 24rpx;
		color: #F33434;
	}
</style>
